<template>
  <div class="filter">
    <el-button type="text" @click="open = !open">
      {{open ? '收起' : '更多'}}筛选条件
    </el-button>
    <el-collapse-transition>
      <div v-show="open" class="filter-groups" :class="{'multi-groups': isMulti}">
        <div class="groups-wrap">
          <div class="groups">
            <div class="group" v-for="(item,index) in groups" :key="item.key">
              <conditions :group.sync="item" @add-condition="addCondition" @select-change="(conIndex, colIndex, val) => {selectChange(index, conIndex, colIndex, val)}"></conditions>
            </div>
          </div>
          <div class="relation" v-if="isMulti">
            <el-switch
              class="switch"
              v-model="relationType"
              active-text="且"
              active-color="#39c6cd"
              :active-value="2"
              inactive-text="或"
              inactive-color="#ff9c4b"
              :inactive-value="1">
            </el-switch>
          </div>
        </div>
        <div class="add-group" v-if="multiGroups">
          <el-button class="add-group-btn" size="mini" icon="el-icon-circle-plus" @click="addGroup">新增一组条件</el-button>
        </div>
        <div class="btns">
          <el-button type="danger">清空</el-button>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="">removeGroup</el-button>
        </div>
        <el-input v-model="n"></el-input>
      </div>
    </el-collapse-transition>

  </div>
</template>

<script>
  import Conditions from './Conditions'
  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

  export default {
    components: {
      ElCollapseTransition: CollapseTransition,
      Conditions
    },
    props: {
      columns: {
        type: Array,
        default: () => [
          {
            type: 'input',
            fieldName: 'column1',
            defaultValue: ''
          }
        ]
      },
      multiGroups: {
        type: Boolean,
        default: false
      },
      defaultGroupsRelation: {
        type: Number,
        default: 2
      },
      defaultConditionsRelation: {
        type: Number,
        default: 2
      },
    },
    data() {
      return {
        n: 0,
        relationType: 2,
        groups: [],
        open: false
      }
    },
    computed: {
      isMulti() {
        return this.groups.length > 1
      }
    },
    created() {
      this.addGroup()
    },
    methods: {
      copy(obj) {
        console.log('obj: %o', obj)
        return JSON.parse(JSON.stringify(obj))
      },
      createKey(array) {
        const obj = array.reduce((acc, current) => {
          console.log(acc)
          console.log(current)
          return {key: acc.key + current.key}
        }, {key: 1})
        return obj.key
      },
      createCondition(keyArray) {
        console.group('createCondition')
        console.log('keyArray: %o', keyArray)
        const columns = this.copy(this.columns)
        let condition = {}
        condition.key = keyArray ? this.createKey(keyArray) : 1
        condition.columns = columns
        condition.value = ''
        console.log('condition: %o', condition)
        console.groupEnd()
        return condition
      },
      addCondition(groupIndex) {
        console.group('addCondition')
        console.log('groupIndex: %o', groupIndex)
        const group = this.copy(this.groups[groupIndex])
        console.log('group: %o', group)
        let conditions = group.conditions
        console.log('conditions: %o', conditions)
        const condition = this.createCondition(conditions)
        console.log('condition: %o', condition)
        conditions.push(condition)
        group.conditions = conditions
        this.$set(this.groups, groupIndex, group)
        console.groupEnd()
      },
      addGroup() {
        const condition = this.createCondition()
        let group = {}
        group.key = this.createKey(this.groups)
        group.index = this.groups.length
        group.relationType = this.defaultConditionsRelation
        group.conditions = [condition]
        this.groups.push(group)
      },
      selectChange(groupIndex, conditionIndex, columnIndex, value) {
        this.$emit('select-change', {groups: this.groups, groupIndex, conditionIndex, columnIndex, value})
      },
      handleSearch() {
        this.$emit('search', 123)
      },





    }
  }
</script>

<style lang="scss" scoped>

  .filter-groups {
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #fff;
    &:last-child {
      margin-bottom: 0;
    }
    &.multi-groups {
      $inputHeight: 40px;
      $lineColor: #DCDFE6;
      .groups-wrap {
        padding-left: 108px;
        padding-right: 108px;
        &:before {
          content: "";
          position: absolute;
          top: $inputHeight / 2;
          left: 44px;
          display: block;
          height: calc(100% - #{$inputHeight});
          width: 1px;
          background-color: $lineColor;
        }
      }
      .groups {
        /*border: 1px solid #DCDFE6;*/
        &:before,
        &:after {
          content: "";
          position: absolute;
          left: -64px;
          display: block;
          height: 1px;
          width: 64px;
          background-color: $lineColor;
        }
        &:before {
          top: 20px;
        }
        &:after {
          bottom: 20px;
        }
      }
      .add-group {
        margin-left: 108px;
      }
    }

    .groups-wrap {
      position: relative;
      box-sizing: border-box;
    }

    .groups {
      position: relative;
      box-sizing: border-box;
      padding: 30px 10px;
      background-color: #f7f5f5;
    }

    .group {
      margin-bottom: 50px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    .add-group, .btns {
      box-sizing: border-box;
      padding: 20px 10px;
      background-color: #fff;
    }

    .btns {
      padding: 30px 10px;
      border-top: 1px solid #eee;
      text-align: center;
    }

    .relation {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
      transform: translateY(-50%);
    }
  }

</style>
